<template>
	<view class="repayment">
		<view class="top">
			<view class="start">
				<uni-calendar ref="calendar" :insert="false" @confirm="satrtConfirm"></uni-calendar>
				<text @click="openStart"><icon-svg icon-class="riqi" /></text>
				<text style="font-size: 30rpx; margin-left: 5rpx;">开始{{ startTime }}</text>
			</view>
			<view class="end">
				<uni-calendar ref="calendar" :insert="false" @confirm="endConfirm"></uni-calendar>
				<text @click="openStart"><icon-svg icon-class="riqi" /></text>
				<text style="font-size: 30rpx;margin-left: 5rpx;">结束{{ endTime }}</text>
			</view>
		</view>
		<view class="content">
			<view class="content-box">
				<view class="item">
					<text>所有还款记录</text>
					<uni-icons color="#bbb" size="22" type="arrowdown" />
				</view>
				<view class="item">
					<view class="conetnt">
						<view style="display: flex;flex: 1;">
							<view style="width: 100%;">
								<text>获得借款</text>
								<view style="margin-top: 10rpx;">
									<uni-icons @click="openEnd" color="#bbb" size="20" type="compose" />
									<text style="font-size: 30rpx; color: #ccc;">12月25日</text>
								</view>
							</view>
							<view style="width: 100%;text-align: right;">
								<text>+1,000,00</text>
								<view style="font-size: 30rpx; color: #ccc; margin-top: 10rpx;">测试1111</view>
							</view>
							<view style="margin-left: 20rpx;"><uni-icons color="#bbb" size="22" type="arrowright" /></view>
						</view>
					</view>
				</view>
				<view class="item" style="text-align: center;color: #ccc;">没有更多了！</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniCalendar,
		uniIcons
	},
	data() {
		return {
			startTime: '2020-11-26',
			endTime: '2020-12-16'
		};
	},
	methods: {
		openStart() {
			this.$refs.calendar.open();
		},
		openEnd() {
			this.$refs.calendar.open();
		},
		startConfirm(e) {
			this.startTime = e.fulldate;
		},
		endConfirm(e) {
			this.endTime = e.fulldate;
		}
	}
};
</script>

<style lang="scss" scoped>
.repayment {
	.top {
		display: flex;
		padding: 20rpx 10rpx;
		background: #fff;
		flex: 1;
		.start {
			text-align: center;
			width: 100%;
		}
		.end {
			text-align: center;
			width: 100%;
			border-left: 1px solid #ccc;
		}
	}
	.content {
		.content-box {
			background: #fff;
			margin: 10rpx;
			.item {
				padding: 30rpx 10rpx;
				border-bottom: 1px solid #ccc;
			}
		}
	}
}
</style>
